<template>
  <div>
    <van-nav-bar
      title="标题"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      @click-right="searchshow = true"
    >
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <van-search
      v-show="searchshow"
      v-model="querInfo.searchinput"
      clearable
      shape="round"
      show-action
      background="#4fc08d"
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @cancel="searchshow = false"
    />
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <el-table :data="tableData">
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="导入时间" width="150">
          <template v-slot="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{
              new Date(scope.row.inputdate).toLocaleString('chinese', {
                hour12: false,
              })
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="100"
          label="办理号码"
          prop="xlsx.办理号码"
        ></el-table-column>
        <el-table-column
          label="业务办理日期"
          prop="xlsx.业务办理日期"
        ></el-table-column>
        <el-table-column
          label="办理人员"
          prop="xlsx.办理人员"
        ></el-table-column>
        <el-table-column label="区域" prop="xlsx.区域"></el-table-column>
        <el-table-column
          width="150"
          label="宽带下单五级地址"
          prop="xlsx.宽带下单五级地址"
        ></el-table-column>
        <el-table-column
          label="下单工号"
          prop="xlsx.下单工号"
        ></el-table-column>
        <el-table-column label="状态" prop="xlsx.状态"></el-table-column>
        <el-table-column
          label="失败原因"
          prop="xlsx.失败原因"
        ></el-table-column>
        <el-table-column
          label="失败原因2"
          prop="xlsx.失败原因2"
        ></el-table-column>
        <el-table-column
          label="是否我司工号"
          prop="xlsx.是否我司工号"
        ></el-table-column>
      </el-table>
      <van-pagination
        v-model="querInfo.pagenum"
        :items-per-page="querInfo.pagesize"
        :total-items="total"
        force-ellipses
        @change="pagenumchange"
      />
      <div style="height: 2rem"></div>
    </van-pull-refresh>
  </div>
</template>

<script>
import { Notify, Toast } from 'vant'

export default {
  data() {
    return {
      // 查询条件
      querInfo: {
        // 页数
        pagenum: 1,
        // 每页数量
        pagesize: 50,
      },
      total: 0,
      // 下拉刷新
      isLoading: false,
      //   宽带查询列表
      tableData: [],
      //   搜索按钮显示与隐藏
      searchshow: false,
    }
  },
  created() {
    this.searchpppoe()
  },
  methods: {
    //   返回上一个页面
    onClickLeft() {
      this.$router.go(-1)
    },
    // 下拉刷新
    onRefresh() {
      this.searchpppoe()
    },
    // 获取宽带查询
    async searchpppoe() {
      const { data: res } = await this.$http.post(
        'hx/search/sppppoe',
        this.querInfo
      )
      if (res.meta.status !== 200) {
        this.isLoading = false
        return Notify({ type: 'danger', message: res.meta.msg })
      }
      Toast(res.meta.msg)
      this.tableData = res.data
      this.isLoading = false
      this.total = res.total
    },
    // 搜索框按下
    onSearch() {
      this.searchpppoe()
    },
    // 监听页码值 改变的事件
    pagenumchange(newPage) {
      this.querInfo.pagenum = newPage
      this.searchpppoe()
    },
  },
}
</script>

<style lang="less" scoped>
.van-search {
  position: absolute;
  width: 100%;
  top: 0px;
  z-index: 9999;
}
</style>